<template>
  <div id="printArea" ref="printArea" style="padding: 0 0 0 0">
    <div
      v-for="(citem, cindex) in bloods"
      :key="cindex"
      class="printDiv"
      style="margin-bottom: 0; margin-left: 0"
    >
      <div class="t d-flex">
        <div class="t-l text-align-center">
          <div class="t-l-1 d-flex flex-column">
            <vue-barcode
              class="vue-barcode-element1"
              :display-value="false"
              :height="height"
              :margin="0.8"
              :value="substr(citem.id_out, 0, 14)"
              :width="1.2"
            >
              原始血袋号
            </vue-barcode>
          </div>
        </div>
      </div>
    </div>
    <el-button type="primary" @click="print()">打印</el-button>
  </div>
</template>

<script>
  import VueBarcode from 'vue-barcode'
  // import { all } from '@/api/blood'
  import { getLodop } from '@/utils/LodopFuncs'
  // eslint-disable-next-line no-unused-vars
  import { toPng } from 'html-to-image'
  import { mapGetters } from 'vuex'
  export default {
    components: {
      VueBarcode,
    },
    props: {},
    data() {
      return {
        height: 32,
        bloods: [
          {
            id: '1662978',
            id_out: '0011824030827',
            pid: '02201916',
            product_id: 39,
            product_id_path: [2, 39],
            abo: 'A',
            rhd: '阳性',
            collect_time: '2024-12-02 10:49:15',
            invalid_time: '2024-12-07 00:00:00',
            status: 0,
            abo_code: null,
            product_code: null,
            invalid_time_code: null,
            capacity: '1.00',
            from: '自采',
            source: '自采',
            blood_user: '24030827',
            tube_number: '02201342',
            created_at: '2025-01-25 09:46:16',
            created_user: '马春娅',
            updated_at: '2025-01-25 09:46:16',
            updated_user: null,
            syncable: 1,
            donor_id: '00725165',
            position: null,
            printable: 0,
            apply_num: '',
            create_time: '2025-01-25 09:46:15',
            create_user: '马春娅',
            created_at_date: '2025-01-25 09:46',
            collect_time_date: '2024-12-02 10:49',
            invalid_time_date: '2024-12-07 00:00',
            product: {
              id: 39,
              pid: 2,
              code: 'FZNSXXB',
              name: '辐照浓缩血小板',
              valid_days: 5,
              idx: 42,
              price: null,
              temperature_self: '20℃～24℃ 连续振荡',
              created_at: '2024-07-04 21:09:00',
              created_user: null,
              updated_at: '2024-07-09 18:02:17',
              updated_user: '马春娅',
              capacity_init: '1.00',
              kunit: 1,
              pre_hours: 0,
            },
            subs: [],
            subFrom: {
              id: 791,
              blood_id: '02201916',
              blood_id_gen: '1662978',
              capacity: '1.00',
              descri: null,
              created_at: '2025-01-25 09:46:16',
              created_user: null,
              updated_at: '2025-01-25 09:46:16',
              updated_user: null,
            },
            preFrom: null,
          },
        ],
        printAreaRefs: [],
      }
    },
    computed: {
      ...mapGetters(['printType']),
    },
    methods: {
      async print() {
        var LODOP = getLodop() //调用getLodop获取LODOP对象
        LODOP.PRINT_INIT('')
        console.log(LODOP)
        // LODOP.SET_ZOOM_MODE(LODOP.ZOOM_WIDTH, 100)
        // LODOP.SET_PRINT_SCALE(100)
        // LODOP.SET_PRINT_PAGESIZE(2)
        LODOP.SET_PRINT_PAGESIZE(1, 958, 1524)
        LODOP.SET_PRINT_STYLEA(3, 'FontName', '微软雅黑') // 创建 Code 128 条码
        // LODOP.ADD_SETUP_BYPATH('PRINT_BARCODE_LAYOUT_MODE', '0') // 设置条码布局模式为0，即不显示文本
        LODOP.ADD_PRINT_BARCODE(0, 0, 155, 36, '128A', this.bloods[0].id_out)
        LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0)
        const strHtml = this.$refs.printArea.innerHTML
        LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', strHtml)
        LODOP.PREVIEW()
        // if (this.printType === 'silent') {
        //   this.$nextTick(() => {
        //     this.printAreaRefs.forEach((el) => {
        //       const barcodeElements = el.querySelectorAll(
        //         '.vue-barcode-element1'
        //       )
        //       console.log(barcodeElements.length)
        //       barcodeElements.forEach(async (barcodeElement) => {
        //         try {
        //           const dataUrl = await toPng(barcodeElement)
        //           const img = document.createElement('img')
        //           img.src = dataUrl
        //           barcodeElement.parentNode.replaceChild(img, barcodeElement)
        //           console.log(barcodeElement)
        //         } catch (error) {
        //           console.error('Error converting barcode to image:', error)
        //         }
        //       })
        //     })
        //   })
        // }
      },
      substr(str, start, length) {
        if (str && str.length > 0) {
          return str.substr(start, length)
        }
        return ''
      },
      print2() {
        const barcodeElements = this.$refs.printArea.querySelectorAll(
          '.vue-barcode-element'
        )
        barcodeElements.forEach(async (barcodeElement) => {
          try {
            const dataUrl = await toPng(barcodeElement)
            const img = document.createElement('img')
            img.src = dataUrl
            barcodeElement.parentNode.replaceChild(img, barcodeElement)
          } catch (error) {
            console.error('Error converting barcode to image:', error)
          }
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .text-shadow {
    margin-bottom: -4px;
    color: transparent;
    -webkit-text-stroke: 4px #000;
    -moz-text-stroke: 4px #000;
    text-stroke: 4px #000;
  }
</style>
